<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
            <el-form-item label="卡券名称：">
                <el-input v-model="formInline.couponName" placeholder></el-input>
            </el-form-item>
            <el-form-item label="卡券类型：">
                <el-radio-group v-model="formInline.couponType">
                    <el-radio-button label>全部</el-radio-button>
                    <el-radio-button label="1">现金券</el-radio-button>
                    <el-radio-button label="2">满减券</el-radio-button>
                    <el-radio-button label="3">折扣券</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">创建卡券</el-button>
            </el-form-item>
        </el-form>

        <div id="listContent">
            <ul id="cardList" class="partUl">
                <li class="partLi" v-for="item in tableData" v-bind:key="item.uuid">
                    <div :class="getBgClass(item.couponPicture)" @click="toEdit(item)">
                        <div class="triangle-text" style="float:left;width:55px;padding-top:20px;">
                            <template>
                                <span v-if="item.couponType == '1'">现金券</span>
                                <span v-if="item.couponType == '2'">满减券</span>
                                <span v-if="item.couponType == '3'">满折券</span>
                            </template>
                        </div>
                        <div class="partDiv0">
                            <img
                                src="../../assets/images/coupon/couponLogo.png"
                                style="width:30px;hwight:30px;"
                            />
                        </div>
                        <div class="partDiv1" style="background-color: transparent;">
                            <span
                                v-if="item.couponType != '3'"
                                style="font-size:34px;"
                            >￥{{item.couponMoney}}</span>
                            <span
                                v-if="item.couponType == '3'"
                                style="font-size:34px;"
                            >打{{item.couponDiscount*10}}折</span>
                            <br />
                            <br />
                            <span
                                v-if="item.couponType != '3'"
                            >满{{item.conponLimitMoney}}减{{item.couponMoney}}元</span>
                            <span
                                v-if="item.couponType == '3'"
                            >满{{item.conponLimitMoney}}打{{item.couponDiscount*10}}折</span>
                        </div>
                        <div
                            class="partDivNum"
                            style="background-color: transparent;"
                            onclick="event.cancelBubble=true"
                        >
                            <el-link
                                @click="updateStatus(item.uuid,1)"
                                v-if="item.status == '0'"
                                :underline="false"
                                class="cpoprt"
                            >启用</el-link>
                            <el-link
                                @click="updateStatus(item.uuid,0)"
                                v-if="item.status == '1'"
                                :underline="false"
                                class="cpoprt"
                            >停用</el-link>
                            <el-link
                                @click="updateStatus(item.uuid,2)"
                                v-if="item.status == '0'"
                                :underline="false"
                                class="cpoprt"
                            >删除</el-link>
                            <el-link
                                @click="getDetail(item.uuid,1)"
                                v-if="item.useScope == '1'"
                                :underline="false"
                                class="cpoprt"
                            >适用商品</el-link>
                            <el-link
                                @click="getDetail(item.uuid,2)"
                                v-if="item.isStoreLevel == '1'"
                                :underline="false"
                                class="cpoprt"
                            >适用门店</el-link>
                        </div>
                    </div>
                    <div style="text-align:center;z-index:999;">
                        <!--<span style="color:#696969;font-size:14px;">创建时间：{{item.createTime}}</span>-->
                        <span
                            style="color:#696969;font-size:14px;"
                            v-if="item.validType == '1'"
                        >领取后{{item.validDate}}天内有效</span>
                        <span
                            style="color:#696969;font-size:14px;"
                            v-if="item.validType == '2'"
                        >{{item.validCreateDate.substring(0,10)}}至{{item.validEndDate.substring(0,10)}}有效</span>
                    </div>
                </li>
            </ul>
        </div>

        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>

        <el-dialog title="适用商品" :visible.sync="dialogVisibleGood" width="55%">
            <el-table
                :data="goodsList"
                border
                style="font-size: 10px;width:100%;"
                height="300"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
                <el-table-column type="index" label="序号" align="center" ></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" width="200" header-align="center"></el-table-column>
                <el-table-column prop="barCode" label="商品编码" width="180" header-align="center"></el-table-column>
                <el-table-column
                    prop="goodsTypeName"
                    label="商品分类"
                    width="180"
                    header-align="center"
                ></el-table-column>
                <el-table-column prop="salePrice" label="商品价格" header-align="center" align="right"></el-table-column>
                <el-table-column prop="unitName" label="销售单位" header-align="center"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleGood = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="适用门店" :visible.sync="dialogVisibleLevel" width="40%">
            <el-table
                :data="shopLevelList"
                border
                style="font-size: 10px;width:100%;margin-top:-20px;"
                height="260"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
                <el-table-column type="index" label="序号" align="center" ></el-table-column>
                <el-table-column
                    prop="gradelevelName"
                    label="等级名称"
                    width="200"
                    header-align="center"
                ></el-table-column>
                <el-table-column prop="levelNumber" label="等级序号" width="120" align="center"></el-table-column>
                <el-table-column prop="beginScore" label="分值范围" header-align="center">
                    <template slot-scope="scope">{{scope.row.beginScore}}至{{scope.row.endScore}}</template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleLevel = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
  queryCouponList,
  updateCouponStatus,
  queryCouponById
} from "@/api/promotionProgramEdit";

export default {
  data() {
    return {
      loading: true,
      formInline: {
        couponName: "",
        couponType: ""
      },
      total: 0,
      userId: "",
      listQuery: {
        current: 1,
        size: 10
      },
      tableData: [],
      goodsList: [],
      shopLevelList: [],
      dialogVisibleGood: false,
      dialogVisibleLevel: false
    };
  },
  mounted() {
    this.couponList();
  },
  methods: {
    getDetail(uuid, flag) {
      queryCouponById(uuid).then(res => {
        if (
          res.result.memberGoodsInfoDTOS != null &&
          res.result.memberGoodsInfoDTOS.length > 0
        ) {
          this.goodsList = res.result.memberGoodsInfoDTOS;
        }
        if (
          res.result.storeGradelevelRuleDTOS != null &&
          res.result.storeGradelevelRuleDTOS.length > 0
        ) {
          this.shopLevelList = res.result.storeGradelevelRuleDTOS;
        }
      });
      if (flag == 1) {
        this.dialogVisibleGood = !this.dialogVisibleGood;
      }
      if (flag == 2) {
        this.dialogVisibleLevel = !this.dialogVisibleLevel;
      }
    },
    getBgClass(pic) {
      if (pic == "1") {
        return " partDiv partDivBg1 partDiv-One ";
      } else if (pic == "2") {
        return " partDiv partDivBg2 partDiv-One ";
      } else {
        return " partDiv partDivBg3 partDiv-One ";
      }
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.couponList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.couponList();
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    search() {
      this.listQuery.current = 1;
      this.couponList();
    },
    couponList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          couponName: this.formInline.couponName,
          couponType: this.formInline.couponType
        },
        ascs: [],
        descs: []
      };
      queryCouponList(data).then(res => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    updateStatus(uuid, status) {
      let data = {
        uuid: uuid,
        status: status
      };
      updateCouponStatus(data).then(res => {
        var msg = "";
        if (status == "1") {
          msg = "启用";
        } else if (status == "0") {
          msg = "停用";
        } else if (status == "2") {
          msg = "删除";
        }
        if (res.code == "1") {
          this.$message({
            showClose: true,
            message: msg + "成功",
            type: "success"
          });
          this.couponList();
        } else {
          this.$message.error(msg + "失败");
        }
      });
    },
    toAdd() {
      this.$router.push({
        name: "couponEdit",
        params: {}
      });
    },
    toEdit(item) {
      this.$router.push({
        name: "couponEdit",
        params: {
          edit: item
        }
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  }
};
</script>
<style lang="less" scoped>
.toptitle {
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #188097;
    background: #f5f5f5;
    line-height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
}
.el-input--small .el-input__inner {
    height: 32px;
    line-height: 32px;
}
.demo-form-inline {
    // border: 1px solid #ebeef5;
    padding: 20px 10px 0px 30px;
}

.partUl {
    overflow: hidden;
    width: 100%;
    margin-left: 0px;
    margin-top: 20px;
}
.emptyLi {
    text-align: center;
    padding-top: 100px;
    font-size: 14px;
    color: #d6d6d6;
}
.partLi {
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}
.partDiv {
    border: 1px solid #ffcc00;
    border-radius: 10px;
    width: 250px;
    text-align: center;
}
.partDivBg1 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg1.png");
}
.partDivBg2 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg2.png");
}
.partDivBg3 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg3.png");
}
.partDiv0 {
    margin-top: 5px;
    text-align: right;
    float: right;
    padding-right: 5px;
    padding-top: 2px;
    background-color: transparent;
}
.partDiv1 {
    color: #fff;
    line-height: 20px;
    padding: 15px;
    padding-left: 10px;
    padding-top: 45px;
}
.partDivNum {
    color: #fff;
    line-height: 30px;
    padding: 0px;
    padding-right: 10px;
    text-align: right;
    background-color: #f27e7a;
}
.partDiv2 {
    background-color: #f9faf9;
    line-height: 30px;
    padding: 20px;
    font-size: 12px;
}
.partButton {
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background-color: transparent;
}
.partDivF {
    float: left;
    width: 5px;
    height: 5px;
    border-radius: 0px 0px 5px 0px;
}
.partDivC {
    float: left;
    width: 10px;
    height: 5px;
    border-radius: 0px 0px 5px 5px;
}
.partDivE {
    float: right;
    width: 5px;
    height: 5px;
    border-radius: 0px 0px 0px 5px;
}
.triangle {
    overflow: hidden;
    position: static;
}
.triangle-back {
    position: absolute;
    border-top: 60px solid #f44336;
    border-right: 60px solid #f27e7a;
}
.triangle-text {
    overflow: hidden;
    width: 40px;
    font-size: 12px;
    color: #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    padding-top: 14px;
    margin-left: -5px;
}
.partDiv-One > .partDiv1 {
    background-color: #f27e7a;
}
.partDiv-One > .partDivSmall > .partDivF,
.partDiv-One > .partDivSmall > .partDivC,
.partDiv-One > .partDivSmall > .partDivE {
    background-color: #f27e7a;
}
.partDiv-One > .partDiv2 {
    background-color: #f9faf9;
    color: #f27e7a;
}
.partDiv-One .partButton {
    border: 2px solid #f27e7a;
    color: #f27e7a;
}
.partDiv-Two > .partDiv1,
.partDiv-Two > .partDivSmall > .partDivF,
.partDiv-Two > .partDivSmall > .partDivC,
.partDiv-Two > .partDivSmall > .partDivE {
    background-color: #74d3d3;
}
.partDiv-Two > .partDiv2 {
    background-color: #f9faf9;
    color: #74d3d3;
}
.partDiv-Two .partButton {
    border: 2px solid #74d3d3;
    color: #74d3d3;
}
.partDiv-Three > .partDiv1,
.partDiv-Three > .partDivSmall > .partDivF,
.partDiv-Three > .partDivSmall > .partDivC,
.partDiv-Three > .partDivSmall > .partDivE {
    background-color: #85c1e9;
}
.partDiv-Three > .partDiv2 {
    background-color: #f9faf9;
    color: #85c1e9;
}
.partDiv-Three .partButton {
    border: 2px solid #85c1e9;
    color: #85c1e9;
}
.partDiv-One > .triangle > .triangle-back {
    border-right: 60px solid #f27e7a;
}
.partDiv-Two > .triagnle > .triangle-back {
    border-right: 60px solid #74d3d3;
}
.partDiv-Three > .triagnle > .triangle-back {
    border-right: 60px solid #85c1e9;
}

.cpoprt:link {
    color: #ffffff;
}
.cpoprt:visited {
    color: #ffffff;
}
.cpoprt:hover {
    color: #ffffff;
}
.cpoprt:active {
    color: #ffffff;
}
</style>